<template>
  <div class="app-container">
    <el-card class="search-card">
      <el-descriptions class="margin-top" title="学业信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            应修总学分
          </template>
          {{ data.trainingProgram.totalCreditsGraduation }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            已得总学分
          </template>
          {{ data.degreeGrade.compulsoryCredits + data.degreeGrade.electiveCredits }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            应修课外学分
          </template>
          {{ data.trainingProgram.extracurricularCredits }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            已得课外学分
          </template>
          {{ data.degreeGrade.extracurricularCredits }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            应修总学绩分
          </template>
          {{ data.trainingProgram.totalAcademicPerformanceScore }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            已得学绩分
          </template>
          {{ data.degreeGrade.academicScore }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            毕业审查结果
          </template>
          <el-result v-if="(data.trainingProgram.totalCreditsGraduation <= data.degreeGrade.compulsoryCredits + data.degreeGrade.electiveCredits)
                            && data.trainingProgram.extracurricularCredits <= data.degreeGrade.extracurricularCredits
                            && data.trainingProgram.totalAcademicPerformanceScore <= data.degreeGrade.academicScore" icon="success" title="已合格"
          ></el-result>
          <el-result v-else icon="error" title="不合格" description="请及时联系老师"></el-result>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="table-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程成绩信息" name="课程成绩信息">
          <el-table :data="scoreList">
            <el-table-column label="学院名称" align="center" prop="depName"/>
            <el-table-column label="课程名称" align="center" prop="subjectCourseName"/>
            <el-table-column label="上课老师" align="center" prop="teacherName"/>
            <el-table-column label="学期" align="center" prop="semester"/>
            <el-table-column label="成绩" align="center" prop="score">
              <!-- 不及格的成绩显示红色 -->
              <template slot-scope="scope">
                <span :style="scope.row.score < 60 ? 'color:red' : ''">{{ scope.row.score }}</span>
              </template>
            </el-table-column>
            <el-table-column label="成绩等级" align="center" prop="score" >
              <!-- 不及格的成绩显示红色 -->
              <template slot-scope="scope">
                <!-- 90-100为A等级，依次类推 -->
                {{ scope.row.score >= 90 ? 'A' : scope.row.score >= 80 ? 'B' : scope.row.score >= 70 ? 'C' : scope.row.score >= 60 ? 'D' : 'E' }}
              </template>
            </el-table-column>
            <el-table-column label="学分" align="center" prop="credits" />
            <el-table-column label="绩点" align="center" prop="gradePoint" />
            <el-table-column label="学分绩点" align="center" prop="gradePoint">
              <template slot-scope="scope">
                {{ scope.row.credits * scope.row.gradePoint }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-card>

  </div>
</template>

<script>
import { getUserDegreeGrade } from '@/api/course/degreeGrade'
import { stuScoreDetail } from '@/api/course/score'

export default {
  data() {
    return {
      data: {
        trainingProgram: {},
        degreeGrade: {}
      },
      scoreList: [],
      activeName: '课程成绩信息'
    }
  },
  created() {
    this.findData()
  },
  methods: {
    findData() {
      getUserDegreeGrade().then(res => {
        this.data = res.data
      })

      stuScoreDetail().then(response => {
        console.log(response.data[0].studentScoreVoList)
        this.scoreList = response.data[0].studentScoreVoList
      })
    },

    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
